<!-- 用户留言 -->
<template>
  <div>
      <div class="messageTitle">用户留言/Message</div>
      <div class="messageContent">
          <form action="#" class="messageForm">
              <div class="messageFormTitle">请对我们提出宝贵意见</div>
              <div class="oneMessageItem"><span>邮箱*</span><input type="text"></div>
              <div class="oneMessageItem"><span>手机号*</span><input type="number"></div>
              <div class="oneMessageItem"><span>验证码*</span><input type="text"></div>
              <div class="oneMessageItem"><span>内容*:</span><input type="text"></div>
          </form>
      </div>
      <slot></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  methods: {}
};
</script>
<style scoped>
.messageTitle {
  width: 100%;
  border: 1px solid #eee;
  padding: 10px 20px;
  border-left: 7px solid red;
  box-sizing: border-box;
}
.messageContent {
  box-sizing: border-box;
  width: 100%;
  height: 250px;
  border: 1px solid #eee;
  text-align: center;
}
.messageFormTitle {
  font-weight: bold;
}
.messageForm span {
  display: inline-block;
  width: 200px;
  text-align: left;
}
.oneMessageItem {
  width: 400px;
  margin: 20px auto;
}
</style>